<template>
    <ul class="foodtype">
        <li v-for="(category,index) in categorys" :key="index">
            <router-link :to="{ name: 'businessListPage', query: { type: index+1 } }">
                <img :src="category.img">
                <p>{{category.name}}</p>
            </router-link>
        </li>
    </ul>
</template>

<script setup>
import { ref } from 'vue';
    let categorys=ref([{name:'美食',img:require('@/assets/img/dcfl01.png')},{name:'早餐',img:require('@/assets/img/dcfl02.png')},
                {name:'跑腿代购',img:require('@/assets/img/dcfl03.png')},{name:'汉堡披萨',img:require('@/assets/img/dcfl04.png')},
                {name:'甜品饮品',img:require('@/assets/img/dcfl05.png')},{name:'速食简餐',img:require('@/assets/img/dcfl06.png')},
                {name:'地方小吃',img:require('@/assets/img/dcfl07.png')},{name:'米粉面馆',img:require('@/assets/img/dcfl08.png')},
                {name:'包子粥铺',img:require('@/assets/img/dcfl09.png')},{name:'炸鸡炸串',img:require('@/assets/img/dcfl01.png')}])
</script>

<style lang="scss" scoped>
/****************** 点餐分类部分 ******************/
.foodtype {
    width: 100%;
    height: 48vw;

    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    /*要使用align-content。10个子元素将自动换行为两行，而且两行作为一个整体垂直居中*/
    align-content: center;

    li {
        /*一共10个子元素，通过计算，子元素宽度在16.7 ~ 20 之间，才能保证换两行*/
        width: 18vw;
        height: 20vw;


        user-select: none;
        cursor: pointer;

        a {
            display: flex;
            /*弹性盒子主轴方向设为column，然后仍然是垂直水平方向居中*/
            flex-direction: column;
            justify-content: center;
            align-items: center;

        }

        img {
            width: 12vw;
            /*视频讲解时高度设置为12vw，实际上设置为10.3vw更佳*/
            height: 10.3vw;
        }

        p {
            font-size: 3.2vw;
            color: #666;
        }
    }
}


</style>